<template>
    <div> 
          <div class="ttop"> <van-nav-bar title="地址管理" left-text="返回" left-arrow  @click-left="onClickLeft"/></div>
          <div class="item">
              <div class="list">
    <!-- 表单 -->
   <van-field v-model="userName" type="text"  placeholder="用户名"/>
    <van-field v-model="telNumber" type="tel"  placeholder="手机号码"/>
    <!-- 弹出层 -->
    <van-cell is-link @click="showPopup">
    <van-field v-model="address" placeholder="省份、城市、区县" />
     </van-cell>
    <van-popup v-model="show" position="bottom">
     <!-- 省市区选择  + 地址编辑:请选择-->
          <van-area  title="标题"   :area-list="areaList"   :columns-placeholder="['请选择', '请选择', '请选择']"
            @confirm="getinfo"
            @cancel="cancel"  />
          <!-- getinfo保存,cancel取消 -->
        </van-popup> 

        <van-field v-model="detailadress" placeholder="详细地址,如楼道、楼盘号等" />
        <input type="checkbox" v-model="checked" />设为默认地址
      </div>
      <div class="bottom" @click="save">保存</div>
    </div>
    </div>
</template>

<script>
import areaList from "@/api/my/areaList.js"
import {saveAction} from "@/api/my/address.js"
    export default {
        data(){
            return{
                show:false,
                areaList,  //省市区
                addressId: 666,
                checked: false,
                detailadress: "",
                telNumber: "",
                userName: "",
                address:""
            }
        },
        methods:{
            onClickLeft(){
                this.$router.go(-1)
            },
            showPopup() {
            this.show = true;
             },
            
            getinfo(res){
                console.log(res);
                var str="";
                res.forEach((el)=>{
                    str+=el.name+"";
                })
                this.address=str;
                this.show=false;
            },
            cancel(){
                this.show=false
            },
            save(){
                var openId=localStorage.getItem("openId");
                saveAction({
                    // 上面多少个v-model下面就对应多少个
                    openId:openId,
                    userName:this.userName,
                    telNumber:this.telNumber,
                    address:this.address,
                    checked:this.checked,
                    detailadress:this.detailadress,
                }).then((res)=>{
                    console.log(res);
                    this.addressId++;
                });
                this.isShow=!this.isShow;
            },
        },
    }
</script>

<style lang="scss" scoped>
.ttop{
    position:fixed;
    width: 100%;
    height: 46px;
    left: 0;
    top: 0;
    z-index: 777;
}

.item {
  padding-top: 46px;
  width: 100%;
  background-color: #f4f4f4;
}
.item .bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
  height: 1.33333rem;
  line-height: 1.33333rem;
  background: #b4282d;
  color: #fff;
  font-size: 0.42667rem;
}
.list {
  text-align: left;
  background-color: #fff;
  input {
    margin-top: 10px;
  }
}
.van-cell {
  padding: 10px;
  i {
    display: none;
  }
}


</style>